<script setup>
import { ref } from 'vue';


const pwd = ref({
    oldPassword: '',
    newPassword: '',
    rePassword: ''
})


const rules = {
    oldPassword: [
        { required: true, message: '请输入原来的密码', trigger: 'blur' },
        { min: 5, max: 16, message: '长度为5~16位非空字符', trigger: 'blur' },
    ],
    newPassword: [
        { required: true, message: '请输入新的密码', trigger: 'blur' },
        { min: 5, max: 16, message: '长度为5~16位非空字符', trigger: 'blur' }
    ],
    rePassword: [
        { required: true, message: '请再次输入新的密码', trigger: 'blur' },
    ]
}

import { updatePwdService } from '@/api/user';
import { ElMessage } from 'element-plus';
import { useTokenStore } from '@/stores/token';
import useUserInfoStore from '@/stores/userInfo';
import { useRouter } from 'vue-router';
const tokenStore = useTokenStore();
const userInfoStoken = useUserInfoStore();
const router = useRouter()

//修改密码
const updatePwd = async () => {
    let result = await updatePwdService(pwd.value);
    ElMessage.success(result.message ? result.message : '修改成功');
    pwd.value = {
        oldPassword: '',
        newPassword: '',
        rePassword: ''
    }
    //删除token
    tokenStore.removeToken();
    //删除info信息
    userInfoStoken.removeInfo();

    router.push('/login');
}

</script>

<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>基本资料</span>
            </div>
        </template>
        <el-row>
            <el-col :span="12">
                <el-form :model="pwd" :rules="rules" label-width="100px" size="large">
                    <el-form-item label="原密码" prop="oldPassword">
                        <el-input type="password" v-model="pwd.oldPassword"></el-input>
                    </el-form-item>
                    <el-form-item label="修改密码" prop="newPassword">
                        <el-input type="password" v-model="pwd.newPassword"></el-input>
                    </el-form-item>
                    <el-form-item label="再次修改" prop="rePassword">
                        <el-input type="password" v-model="pwd.rePassword"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="updatePwd">提交修改</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </el-card>
</template>